<template>
	<page-meta :page-style="`overflow:${showActivePop || showHelpPop || showShare ? 'hidden' : 'visible'};`"></page-meta>
	<view class="content-box" :class="myProgress.details?'content-box-bg':''">
		<!-- 头部 -->
		<navigate :title="navTitle" bgColor="#6e0001" fontColor="#fff"></navigate>
		<!-- <navigate :title="navTitle"></navigate> -->
		<!-- 活动信息 -->
		<view class="content-info" :style="{paddingTop:contentTop + 'px'}">
			<active v-if="activeInfo.activity" :activeInfo="activeInfo" :progress="myProgress" @updateFlage="updateFlage=!updateFlage"/>
		</view>
		<!-- 我的进度 -->
		<view class="active-info-progress">
			<progress :progressInfo="myProgress" :userInfo="userInfo" :activeStatus="activeStatus" :helpMoneyOptions="helpMoneyOptions" @helpCutMoney="helpCutMoney" @viewMy="viewMy"@showShare="showShare = true"/>
		</view>
		<!-- 砍价记录 -->
		<view class="active-info-history" v-if="myProgress.details">
			<view class="active-info-title">祝福记录</view>
			<view class="info-history-list active-info-content">
				<scroll-view scroll-y="true" class="history-list-box" v-if="myProgress.details.length">
					<view class="history-list-item" v-for="item,index in myProgress.details" :key="index">
						<block v-if="item.avatar">
							<image :src="item.avatar" mode="aspectFill" class="item-img"></image>
						</block>
						<image v-else src="/static/img/default_avater.png" mode="aspectFill" class="item-img"></image>
						<view class="list-item-info">
							<view class="item-info-nickname">{{item.nickname}}</view>
							<view class="item-info-time">{{item.crtime}}</view>
						</view>
						<view class="list-item-progress themeColor">积{{item.details_val}}%</view>
					</view>
				</scroll-view>
				<view class="history-list-box" v-else style="text-align: center;line-height: 360rpx;">
					暂无记录
				</view>
			</view>
		</view>
		<!-- 活动规则 -->
		<view class="active-info-ruler">
			<view class="active-info-title">
				活动规则
			</view>
			<view class="info-ruler-list active-info-content">
				<text v-if="activeInfo.activity">{{activeInfo.activity.content}}</text>
				<loadMore v-else state="loading"/>
			</view>
		</view>
		
		<view class="active-info-img" v-if="baseAppInfo.images">
			<image :src="baseAppInfo.images[0]" mode="widthFix"></image>
		</view>
		
		<view class="company" v-if="myProgress.details && company.inc_name" @click="us(company.inc_tel)">
			{{company.inc_name}}
		</view>
		
		
		<!-- 帮忙砍价-弹窗 -->
		<helpMoneyPpp v-if="showHelpPop" :contentTop="contentTop" :myUserInfo="userInfo" @close="showHelpPop = false" @helpCutMoney="helpCutMoney" @getUserInfo="getUserInfo" :isUpdate="isUpdate"/>
		<!-- 活动广告-弹窗 -->
		<view v-if="showActivePop" :style="{opacity:showHelpPop?.2:1}">
			<activePop v-if="showActivePop" :modal_image="modal_image" :contentTop="contentTop" @close="showActivePop = false"/>
		</view>
		<!-- 客服按钮 -->
		<!-- <pageFlexBtn/> -->
		<shareBg v-if="showShare" :contentTop="contentTop" @close="showShare = false"/>
	</view>
</template>

<script>
	import active from "./components/active.vue"
	import progress from "./components/progress.vue"
	import helpMoneyPpp from "./components/helpMoneyPop.vue"
	import activePop from "./components/activePop.vue"
	import shareBg from "./components/shareBg.vue"
	export default {
		components:{
			active,
			progress,
			helpMoneyPpp,
			activePop,
			shareBg
		},
		data(){
			return {
				activeInfo:{},
				myProgress:{},
				userInfo:{},
				company:'',
				showHelpPop:false,
				showActivePop:false,
				showShare:false,
				contentTop:0,
				baseAppInfo:{},
				updateFlage:false,
				isPhone:getApp().globalData.isPhone,
				helpMoneyOptions:{
					id:'',
					user_id:'',
					user_activity_id:''
				}
			}
		},
		onLoad(options) {
			if(options.user_id){
				//不可分享别人的活动
				uni.hideShareMenu()
				console.log(options);
				// 走的是别人的分享id,保存该id
				this.helpMoneyOptions = {
					id:options.activity_id,
					user_id:options.user_id,
					user_activity_id:options.user_activity_id
				}
			}
			this.init()
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
				this.getAppInfo()
			},1000)
		},
		onShareAppMessage(){
			return this.getShareInfo();
		},
		computed:{
			isUpdate(){
				let userInfo = this.userInfo
				let is_effect = this.myProgress?.is_effect || ''
				let activeStatus = this.activeStatus
				let rge = /[A-Za-z]/
				if(!userInfo.id){
					return false
				}
				// 没获取数
				if(!is_effect){
					return false 
				}
				// 活动以参与结束
				if(!activeStatus){
					return false 
				}
				//活动未结束，手机号不符合标准
				if(userInfo.phone.length !== 11 || !rge.test(userInfo.phone)){
					this.showHelpPop = true
					return true 
				}
			},
			activeStatus(){
				let {activity} = this.activeInfo
				let updateFlage = this.updateFlage
				let myProgress= this.myProgress
				console.log('更新标记');
				if(myProgress.is_effect == 2){
					console.log('myProgress.is_effect');
					uni.hideShareMenu()
					return 0
				}
				if(!activity?.id){
					// 数据没获取到
					return 1
				}
				let endT = this.isPhone?activity.end_time.replace(/-/g,'/') :activity.end_time
				let startT = this.isPhone?activity.start_time.replace(/-/g,'/'):activity.start_time
				let end_time = new Date(endT).getTime()
				let start_time = new Date(startT).getTime()
				let nowTime = new Date().getTime()
				// 未开始
				if(start_time && nowTime < start_time){
					return 2
				}
				// 未结束
				if(end_time && nowTime < end_time){
					return 1
				}
				uni.hideShareMenu()
				return 0
			},
			// 小程序标题
			navTitle(){
				if(this.activeInfo?.activity?.title){
					return this.activeInfo?.activity?.title
				}
				return ''
			},
			// 广告弹窗
			modal_image(){
				if(this.activeInfo?.bargain?.modal_image){
					let shareTIme = this.$com.getData('shareTime')
					let flage = true
					if(shareTIme){
						// 分享后两小时内不弹出广告
						let nowTime = new Date().getTime()
						flage = nowTime - shareTIme*1 > 7200000
						if(flage){
							this.$com.rmData('shareTime')
						}
					}
					this.showActivePop = flage
					return this.activeInfo?.bargain?.modal_image
				}
				return ''
			}
		},
		methods:{
			init(){
				this.$com.getStatusBarHeight((res) => {
					this.contentTop = res.content_top;
				});
				this.getAppInfo()
			},
			// 获取系统相关信息
			getAppInfo(){
				var _this = this;
				// 已登录
				if(this.$com.checkLoginState()){
					_this.$appData.app.getAppInfo({}, function(resp){
						_this.$com.setData('app', resp.data);
						_this.baseAppInfo = resp.data;
						// 登录并获取活动详情
						_this.getUserInfo(
							_this.getActive
						)
					});
					return
				}
				// 未登录
				this.toLogin()
			},
			toLogin(){
				var _this = this;
				this.$com.wxLogin(function(res){
					_this.$nextTick(()=>_this.getAppInfo())
				},()=>{
						_this.getActive()
					})
			},
			// 活动进度
			getActive(){
				this.$appData.bargain.getActivityDetail({},(res)=>{
					this.activeInfo = res.data
					let activity_id = res.data.activity.id
					// 活动详情后获取活动进度
					this.$nextTick(()=>{
						let {user_id,id} = this.helpMoneyOptions
						// 判断助力配置是否有用户id,未参与活动用户需要调用myprogress
						if(id){
							this.getMyProgress({activity_id},true)
							this.getUserProgress({activity_id:id,user_id})
							return
						}
						this.getMyProgress({activity_id})
						
					})
				})
			},
			// 分享用户进度
			getUserProgress(params){
				this.$appData.bargain.getUserProcess(params,(res)=>{
					if(res.code==1){
						return
					}
					this.myProgress = res.data
				})
			},
			// 用户本身进度
			getMyProgress(params,flage){
				this.$appData.bargain.getMyProcess(params,(res)=>{
					if(flage){
						return
					}
					if(res.code==1){
						return
					}
					this.myProgress = res.data
				})
			},
			// 用户信息
			getUserInfo(call){
				this.$appData.user.getUserInfo({},(res)=>{
					// 登录过期
					if(res.code && res.code ==401){
						this.toLogin()
						return
					}
					let {id} = res.data.user
					this.userInfo = res.data.user
					this.company = res.data
					// 分享用户自己点进来
					if(this.helpMoneyOptions.user_id && this.helpMoneyOptions.user_id == id){
						// uni.showShareMenu()
						// this.helpMoneyOptions = {
						// 	id:'',
						// 	user_id:'',
						// 	user_activity_id:''
						// }
						this.viewMy()
						return
					}
					// 执行回调
					this.$nextTick(()=>{
						if(call){
							call()
						}
					})
				})
			},
			// 砍价
			helpCutMoney(){
				let {id,user_activity_id,user_id} = this.helpMoneyOptions
				this.$appData.bargain.helpCutMoney({id,user_activity_id},(res)=>{
					if(res?.code ==1){
						// 需要完善用户信息
						this.showHelpPop = true
						return
					}
					this.getUserProgress({activity_id:id,user_id})
					
				})
			},
			// 查看我的
			viewMy(){
				this.helpMoneyOptions = {id:'',user_activity_id:'',user_id:""}
				// uni.startPullDownRefresh()
				uni.redirectTo({
					url:'/pages/bargain/bargain'
				})
			},
			getShareInfo(){
				var app = this.baseAppInfo;
				let activity_id = this.activeInfo.activity.id
				let user_id = this.userInfo.id
				let user_activity_id = this.myProgress.user_activity_id
				
				var title = app.share_title;
				var imageUrl = app.share_image;
				var path = this.$com.buildQuery('/'+this.$com.getPagePath(), {user_id,activity_id,user_activity_id});
				
				if(!this.$com.getData('shareTime')){
					let nowTime = new Date().getTime()
					this.$com.setData('shareTime',nowTime)
				}
				
				var data = {title:title, imageUrl:imageUrl, path:path};
				console.log('getShareInfo',data);
				return data;
			},
			us(phoneNumber){
				uni.makePhoneCall({
					phoneNumber:phoneNumber+''
				})
			}
		}
	}
</script>

<style>
page{background-color: #790001;}
	.content-box-bg{background-image:linear-gradient(135deg,#790001,#da0000)}
	.active-info-title { padding: 60rpx 0 40rpx;color: white;}
	.active-info-content{ background-color: white;border-radius: 20rpx;width: 100%;line-height: 60rpx;font-size: 28rpx;font-weight: bold; }
	/* 砍价进度 */
	.active-info-progress{width: 690rpx;margin: 10rpx auto;}
	
	/* 砍价记录 */
	.active-info-history{width: 690rpx;margin: 0 auto;}
	.history-list-box { height: 360rpx;width: 100%;}
	.history-list-item{padding: 40rpx 30rpx 0 40rpx;height: 80rpx;display: flex;justify-content: space-between;align-items: center;}
	.history-list-item:last-child{padding-bottom: 30rpx;}
	.item-img{width: 80rpx;height: 80rpx;border-radius: 50%;}
	.list-item-info{flex: 1;padding: 0 40rpx;line-height: 40rpx;}
	.item-info-nickname{font-size: 30rpx;font-weight: bold;}
	
	/* 活动规则 */
	.active-info-ruler{width: 690rpx;margin: 0 auto;padding-bottom: 80rpx;}
	.info-ruler-list{word-break: break-word;padding: 20rpx;width: 100%;box-sizing: border-box;}
	
	.active-info-img{width: 690rpx;margin: 0 auto;}
	.active-info-img image{width: 100%;border-radius: 20rpx;}
	
	.company{text-align: center;padding:30rpx 0 50rpx;color: white;font-size: 28rpx}
/* 	.ruler-list-item{padding: 0 40rpx 20rpx;line-height: 40rpx;}
	.ruler-list-item:first-child{padding-top: 40rpx;} */
</style>